import { Image, Text, View } from '@tarojs/components'
import React, { useCallback, useMemo } from 'react'
import './index.less'

export interface Package {
  /** 套餐ID */
  id: string
  /** 套餐名称 */
  name: string
  /** 套餐描述 */
  description?: string
  /** 套餐图片 */
  image?: string
  /** 价格 */
  price?: string
  /** 额外信息 */
  extra?: React.ReactNode
}

export interface PackageCardProps {
  value?: string | number
  /** 套餐信息 */
  package: Package
  /** 是否选中 */
  isSelected?: boolean
  /** 选择事件 */
  onSelect?: (materialId: string, selected: boolean) => void
  /** 自定义类名 */
  className?: string
}

/**
 * PackageCard 套餐卡片组件
 * 用于展示套餐信息
 */
const PackageCard: React.FC<PackageCardProps> = ({ value, package: pkg, onSelect, className = '' }) => {
  const selected = useMemo(() => value + '' === pkg.id + '', [pkg.id, value])

  const handleClick = useCallback(() => {
    if (onSelect) {
      onSelect(pkg.id, !selected)
    }
  }, [onSelect, pkg.id, selected])

  return (
    <View className={`package-card ${selected ? 'selected' : ''} ${className}`} onClick={handleClick}>
      <View className='package-image'>
        <Image src={pkg?.image || ''} mode='aspectFill' className='image' />
        {selected && <View className='selected-badge'>✓</View>}
      </View>
      <View className='package-content'>
        <Text className='package-name'>{pkg.name}</Text>
        <Text className='package-description'>{pkg.description}</Text>
        {pkg.price && <Text className='package-price'>{pkg.price}</Text>}
        {pkg.extra && <View className='package-extra'>{pkg.extra}</View>}
      </View>
    </View>
  )
}

export default PackageCard
